<!-- 员工部门列表选择组件 -->
<template>
    <div>
        <el-form-item label="时间筛选" class="e-m-r-10">
            <el-radio-group v-model="timeType" @input="change">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">今日</el-radio-button>
                <el-radio-button label="2">昨日</el-radio-button>
                <el-radio-button label="3">本月</el-radio-button>
                <el-radio-button label="4">上月</el-radio-button>
                <el-radio-button label="5">本季度</el-radio-button>
                <el-radio-button label="6">上季度</el-radio-button>
                <el-radio-button label="7">本年</el-radio-button>
                <el-radio-button label="8">上年</el-radio-button>
                <el-radio-button label="9">自定义日期</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="timeType == 9">
            <el-date-picker v-model="timeValue" @change="changeTime" :clearable="false"
                value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" clearable>
            </el-date-picker>
        </el-form-item>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: [Number, String, Array],
                default: null
            }
        },
        data() {
            return {
                timeType: this.value, // 使用本地 data 属性来保存选中的值
                timeValue: '',
                startDate: '',
                endDate: '',
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(newVal) {
                    this.timeType = newVal; // 监听外部变化以保持同步
                }
            }
        },
        mounted() {
            
        },
        methods: {
            change(){
                if(this.timeType != '9'){
                    this.$emit('input', this.timeType); // 如果支持 v-model，则也触发 input 事件
                }else{
                    this.timeValue = ""
                    this.startDate = ''
                    this.endDate = ''
                }
            },
            changeTime(e) {
                console.log(e)
                if (e && e.length > 0) {
                    this.startDate = e[0]
                    this.endDate = e[1]
                    this.timeType = 9
                    this.$emit('change', { startDate: this.startDate, endDate: this.endDate, timeType: this.timeType });
                } else {
                    this.timeType = 0
                    this.startDate = ''
                    this.endDate = ''
                    this.$emit('change', { startDate: this.startDate, endDate: this.endDate, timeType: this.timeType });
                }
            }
        }
    }
</script>